<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-常用指令 v-if 用来显示或隐藏元素</title>
    <script src="../js/vue.min.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        flag: true
                    }
                },
                methods: {
                    change() {
                        this.flag = !this.flag;
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="app">
    <button v-on:click="change">显示隐藏</button>
    <div style="width: 50px; height: 50px;background:gold;" v-if="flag">从dom删除在恢复</div>

    <button v-on:click="change">显示内容隐藏</button>
    <div style="width: 100px ; height: 100px; color: #4cae4c" v-show="flag">v-show  可以显示和隐藏的内容,被设置display:none 或者block</div>
</div>
</body>
</html>